import React, { useMemo, ReactElement } from 'react';
import styles from "./index.less";
import { IKnowledgeChilrenList, IKnowledgeList, IKnowledgeChilrenListChild } from '@/util/knowledge'
import { convert, timeAgo } from '@/util/getTime'
import { observer } from 'mobx-react-lite';
import useStore from '@/context/useStore';
interface Iprops {
    KnowledgeChilrenList: IKnowledgeChilrenList;
    KnowledgeList: IKnowledgeList[][];
    id: string;
    goDetailPage: (item: IKnowledgeList) => void;
    goDetailPageID: (ID: string) => void
}
function Index(props: Iprops) {
    console.log(props.KnowledgeChilrenList.children);
    return (
        <div className={styles.container}>
            <div className={styles.containerHade}>
                知识笔记/{props.KnowledgeChilrenList.summary}
            </div>
            <div className={styles.cantainerMain}>
                <div className={styles.cantainerMainLeft}>
                    <header>
                        {props.KnowledgeChilrenList.title}
                    </header>
                    <main>
                        <div className={styles.imgBox}>
                            <img src={props.KnowledgeChilrenList.cover} alt="" />
                        </div>
                        <div className={styles.pageDetail}>
                            <p>{props.KnowledgeChilrenList.title}</p>
                            <p>{props.KnowledgeChilrenList.summary}</p>
                            <p>{props.KnowledgeChilrenList.views}次阅读 · {convert(props.KnowledgeChilrenList.updateAt)}</p>
                            <div><button>开始阅读</button></div>
                        </div>
                        <div className={styles.pageDetailList}>
                            {
                                props.KnowledgeChilrenList.children && props.KnowledgeChilrenList.children.map((item: IKnowledgeChilrenListChild) => {
                                    return <div onClick={() => { props.goDetailPageID(item.id) }}>
                                        <div>{item.title}</div>
                                        <div>{convert(item.updateAt)}
                                            <i aria-label="icon: arrow-right" className="anticon anticon-arrow-right">
                                                <svg viewBox="64 64 896 896" focusable="false" className="" data-icon="arrow-right" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                                                    <path d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 0 0 0-48.4z"></path>\
                                                </svg></i></div>
                                    </div>
                                })

                            }

                        </div>
                    </main>

                </div>
                <div className={styles.cantainerMainRight}>
                    <div className={styles.cantainerMainRightMain}>
                        <header>其他知识笔记</header>
                        {props.KnowledgeList[0] && props.KnowledgeList[0].map((item: IKnowledgeList) => {
                            // console.log(item);
                            if (item.id != props.id) {
                                return <div onClick={() => { props.goDetailPage(item) }}>
                                    <div><img src={item.cover} alt="" /></div>
                                    <div>
                                        <p>{item.title}</p>
                                        <p>{item.summary}</p>
                                        <div>{item.views}次阅读·大约{timeAgo(+new Date(item.createAt))}前</div>
                                    </div>
                                </div>
                            } else {
                                return ''
                            }
                        })}
                    </div>
                </div>
            </div>
        </div>
    );
}
export default observer(Index)
